<template>
  <el-col :span="24" class="colmargin">
    <el-radio-group
      v-model="indextab"
      @change="getExecutionList"
      style="margin-bottom: 10px"
    >
      <el-radio-button size="small" label="1">费用种类</el-radio-button>
      <el-radio-button size="small" label="2">退费记录</el-radio-button>
      <el-radio-button size="small" label="3">押金清单</el-radio-button>
    </el-radio-group>
    <el-col
      :span="12"
      v-if="indextab != '3' && currentPageData.length != 0"
      style="margin-bottom: 10px"
    >
    </el-col>
    总价：{{money}}
    <el-card
      class="box-card"
      style="
        width: 100%;
        margin: auto;
        margin-bottom: 10px;
        font-size: 14px;
        overflow: auto;
      "
      v-for="(item, index) in currentPageData"
      :key="index"
    >
      <el-col :span="24" v-if="indextab != '3'">
         <!-- <el-col :span="24">
            项目类型:
       <span class="span" >
      {{item.name}}
        </span>
         </el-col>  -->
        <el-col :span="12">
          费用种类:
          <span class="span">
            {{ item.cate_name }}
          </span>
        </el-col>
        <el-col :span="12">
          合计:
          <span class="span">
            {{ item.money }}
          </span>
        </el-col>

        <!-- <el-col :span="12">
            单价:
        <span class="span" >
      {{  item.receipts}}
        </span>
         </el-col>
            <el-col :span="12">
            折扣:
        <span class="span" >
      {{item.discount}}
        </span>
         </el-col>
          <el-col :span="12">
             数量:
         <span class="span">
     {{item.number}}{{item.unit}}
        </span>
         </el-col>
    
       
           <el-col :span="24">
             规格:
       <span class="span" >
      {{item.specification}}
        </span>
         </el-col> -->

        <el-col :span="18">
          {{ item.updated_at }}
        </el-col>
        <el-col :span="6" v-if="indextab == '1'">
          <el-link :underline="false" type="success" @click="seedelit(item)"
            >查看详情</el-link
          >
        </el-col>
      </el-col>
      <el-col :span="24" v-else>
        <el-col :span="24">
          费用:
          <span class="span">
            {{
              item.action_type == 1
                ? "充值"
                : item.action_type == 4
                ? "退款"
                : "住院结算"
            }}
          </span>
        </el-col>
        <el-col :span="24">
          费用:
          <span class="span">
            {{ item.fee }}
          </span>
        </el-col>

        <el-col :span="24">
          时间:
          <span class="span">
            {{ item.created_at }}
          </span>
        </el-col>
      </el-col>
    </el-card>
    <el-pagination
      background
      small
      layout="prev, pager, next"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="totalPage"
      @prev-click="prevPage"
      @next-click="nextPage"
      @current-change='sizeChange'
      v-if="currentPageData.length != 0"
    >
    </el-pagination>
    <el-dialog
      :close-on-click-modal="false"
      title="费用详情"
      :visible.sync="centerDialogVisible"
      width="70%"
      center
      :modal='false'
      class="see_box"
    >
      <span slot="footer" class="dialog-footer">
             <el-col :span="8">
   <div class="block">
   
    <el-date-picker
      v-model="value1"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      @change="inputch"
       format="yyyy 年 MM 月 dd 日"
      value-format="yyyy-MM-dd"
      >
    </el-date-picker>
  </div>
    </el-col>
   <el-col :span="6">
    <el-input placeholder="搜索" v-model="keyword" @input="inputch"></el-input>
    </el-col>
       <el-col :span="3">
     <el-button type="success" @click="keyword='',value1 = ['',''],inputch()"
          >重置</el-button
        >
    </el-col>
        <el-table :data="currentPageData2" style="width: 100%">
          <template v-for="(item, index) in tableTitle1">
            <el-table-column
              :width="item.width"
              :prop="item.prop"
              :label="item.label"
              :key="index"
            >
            </el-table-column>
          </template>
        </el-table>
        <el-pagination
          background
          small
          layout="prev, pager, next"
          :current-page="currentPage2"
          :page-size="pageSize2"
          :total="totalPage2"
          @prev-click="prevPage2"
          @next-click="nextPage2"
          @current-change='sizeChange2'
        >
        </el-pagination>
        <el-button type="success" @click="centerDialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-empty
      description="暂无数据"
      v-if="currentPageData.length == 0"
    ></el-empty>
  </el-col>
</template>

<script>
import {
  costRecord,
  deposiLog,
  getAdviceList,
  getFeeCate,
  getFeeDetail,
} from "@/api/zhuyanre";

export default {
  // name:"costsRecord",
  props: ["id"],
  data() {
    return {
      tableData: [],
      tableData2: [],
      tableData1: [],
      indextab: "1",
      money: "",
      centerDialogVisible: false,
      item: {},
      tableTitle1: [
        {
          prop: "name",
          label: "名称",
        },
        {
          prop: "created_at",
          label: "时间",
        },
        {
          prop: "money",
          label: "金额",
        },
      ],
      //所有数据
      totalPage: 1, // 统共页数，默认为1
      currentPage: 1, //当前页数 ，默认为1
      pageSize: 4, // 每页显示数量
      currentPageData: [], //当前页显示内容
      totalPage2: 100, // 统共页数，默认为1
      currentPage2: 1, //当前页数 ，默认为1
      pageSize2: 5, // 每页显示数量
      cate_id: "",
      currentPageData2:[],
      value1:['','']
    };
  },
  mounted() {
    this.getExecutionList();
    // fee_category_id
  },
    watch:{
      id(){
         this.getExecutionList()
         this.totalPage = this.totalPage == 0 ? 1 : this.totalPage;
      }
   },
  methods: {
    //查看  详情
    seedelit(item) {
      this.cate_id = item.cate_id;
      this.centerDialogVisible = true;
      this.seedelit2()
    },
    inputch(){
        this.seedelit2()
    },
    seedelit2() {
       var   time=''
          if (this.value1[0]!='') {
             time=this.value1[0]+'|'+this.value1[1]
          }else{
            time=''
          }
      var data = {
        hospital_id: this.id,
        cate_id: this.cate_id,
        // page: this.pageSize2,
        // limit: this.currentPage2,
        keyword:this.keyword,
        times:time ,
      };
 

      getFeeDetail(data).then((res) => {
        if (res.code == 200) {
          this.totalPage2=res.data.count
          this.tableData2 = res.data.lists;
           let begin = (this.currentPage2 - 1) * this.pageSize2;
            let end = this.currentPage2 * this.pageSize2;
            this.currentPageData2 = this.tableData2.slice(begin, end);
        }
      });
    },
    handleSizeChange(e) {
      this.limit = e;
      that.getHospitalMember();
    },
    handlePagination(e) {
      this.page = e;
      that.getHospitalMember();
    },
    getExecutionList() {
      let d = {
        hospital_id: this.id,
        order_type: this.indextab,
      };
      if (this.indextab == "3") {
        deposiLog({ hospital_id: this.id }).then((res) => {
          if (res.code == 200) {
            this.tableData = res.data.data;
            this.money = res.data.money;
            this.item = this.tableData[0];
            this.totalPage = res.data.data.length;
            this.totalPage = this.totalPage == 0 ? 1 : this.totalPage;
            let begin = (this.currentPage - 1) * this.pageSize;
            let end = this.currentPage * this.pageSize;
            this.currentPageData = this.tableData.slice(begin, end);
          }
        });
      } else if (this.indextab == "2") {
        costRecord(d).then((res) => {
          if (res.code == 200) {
            this.tableData = res.data.lists;
            this.money = res.data.total;
            this.item = this.tableData[0];
            this.totalPage = res.data.lists.length;
            this.totalPage = this.totalPage == 0 ? 1 : this.totalPage;
            let begin = (this.currentPage - 1) * this.pageSize;
            let end = this.currentPage * this.pageSize;
            this.currentPageData = this.tableData.slice(begin, end);
          }
        });
      } else {
        var data = {
          hospital_id: this.id,
        };
        getFeeCate(data).then((res) => {
          if (res.code == 200) {
            this.tableData = res.data.lists;
            this.money = res.data.total;
            this.item = this.tableData[0];
            this.totalPage = res.data.lists.length;
            this.totalPage = this.totalPage == 0 ? 1 : this.totalPage;
            let begin = (this.currentPage - 1) * this.pageSize;
            let end = this.currentPage * this.pageSize;
            this.currentPageData = this.tableData.slice(begin, end);
          }
        });
      }
    },
    setCurrentPageData() {
      let begin = (this.currentPage - 1) * this.pageSize;
      let end = this.currentPage * this.pageSize;
      this.currentPageData = this.tableData.slice(begin, end);
    },
        setCurrentPageData2() {
      let begin = (this.currentPage2 - 1) * this.pageSize2;
      let end = this.currentPage2 * this.pageSize2;
      this.currentPageData2 = this.tableData2.slice(begin, end);
    },
    //上一页
    prevPage2() {
        console.log(this.currentPage);
      if (this.currentPage2 == 1) return;

      this.currentPage2--;
       this.setCurrentPageData2();
    },
    // 下一页
    nextPage2() {
            if (this.currentPage2 == this.totalPage2) return;

      this.currentPage2++;
    
      this.setCurrentPageData2();
    },
      sizeChange(val){
          console.log(val)
          this.currentPage=val
           this.setCurrentPageData();
        },
          sizeChange2(val){
          console.log(val)
          this.currentPage2=val
           this.setCurrentPageData2();
        },
    //上一页
    prevPage() {
      console.log(this.currentPage);
      if (this.currentPage == 1) return;

      this.currentPage--;
      this.setCurrentPageData();
    },
    // 下一页
    nextPage() {
      if (this.currentPage == this.totalPage) return;

      this.currentPage++;
      this.setCurrentPageData();
    },
  },
};
</script>

<style scoped>
.colmargin {
  overflow: auto;
}
.see_box .el-col {
  margin: 5px 0px;
  font-size: 20px;
}
.see_box .span {
  color: dimgray;
  font-size: 18px;
  text-indent: 2em;
}
.span {
  color: dimgray;
  font-size: 13px;
  text-indent: 2em;
}
.colmargin .el-col {
  margin: 2px 0px;
}
</style>